<!--
// 
// GColorSelect.vue
// rzhwweb
// 
// Created by 区区电脑 on 2024/02/19.
// 
-->
<template>
    <div class="GColorSelect">
        <el-color-picker v-model="value" :predefine="colors"/>
    </div>
</template>

<script setup>
import {ref, reactive, computed, watch, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";

const props = defineProps({
    modelValue: {
        type: String,
        default: () => ""
    },
    colors: {
        type: Array,
        default: () => ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399']
    }
});
const emits = defineEmits(["update:modelValue"]);

// 路由
const router = useRouter();
// store
const store = useStore();

const value = ref()

function setValue() {
    value.value = props.modelValue;
}

watch(() => props.modelValue, () => {
    setValue()
})
watch(() => value.value, (v) => {
    emits("update:modelValue", v)
})

onMounted(() => {
    setValue()
})
</script>

<style scoped lang="scss">
</style>